<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>配置控制台</title>
    <!-- 引入 Vuetify CSS -->
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/vuetify@3.7.6/dist/vuetify.min.css" rel="stylesheet" />
  </head>
  <body>
    <div id="app">
      <v-container>
        <v-card>
          <v-toolbar color="primary" title="配置控制台">
            <v-btn @click="submitConfig" prepend-icon="$vuetify" variant="tonal" class="mr-4"> 提交配置 </v-btn>
          </v-toolbar>
          <v-combobox
            clearable
            chips
            label="项目文件"
            :items="projectPaths"
            variant="outlined"
            class="px-4 pt-4"
            v-model="selectedProject"
            @update:model-value="onSelectedProject"
            @update:focused=""
          >
          </v-combobox>
          <v-card-item>
            <div class="d-flex flex-row">
              <v-tabs v-model="tab" color="primary" direction="vertical">
                <v-tab
                  v-for="(configItem, key,index) in configs"
                  :key="key"
                  :value="key"
                  :prepend-icon="configIcons[index]"
                  :text="configNames[index]"
                ></v-tab>
              </v-tabs>

              <v-tabs-window class="flex-fill" v-model="tab">
                <v-tabs-window-item v-for="(configItem, key,index) in configs" :key="key" :value="key">
                  <v-container v-if="fixItems.includes(configNames[index])">维护中...</v-container>
                  <v-container v-else>
                    <v-row>
                      <v-col v-for="(tagValue, tagKey) in configItem" :key="tagKey" cols="12" md="4" sm="4">
                        <v-text-field
                          v-if="typeof tagValue === 'string'"
                          variant="underlined"
                          v-model="configItem[tagKey]"
                          :label="`@${tagKey}`"
                        ></v-text-field>
                        <v-switch
                          v-else
                          v-model="configItem[tagKey]"
                          color="indigo"
                          :label="`@${tagKey}${tagValue ? '开启' : '关闭'}`"
                          hide-details
                        ></v-switch>
                      </v-col>
                    </v-row>
                  </v-container>
                </v-tabs-window-item>
              </v-tabs-window>
            </div>
          </v-card-item>
        </v-card>
      </v-container>
    </div>

    <!-- 引入 Vue 3 和 Vuetify 的 JavaScript -->
    <script src="https://unpkg.com/vue@3.2.0/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.7.6/dist/vuetify.min.js"></script>

    <script>
      const { createApp, ref, reactive, computed } = Vue;
      const { createVuetify } = Vuetify;
      // 获取 vscode API
      const vscode = acquireVsCodeApi();
      // 创建 Vuetify 实例
      const vuetify = createVuetify();

      const app = createApp({
        setup() {
          let tab = ref('');
          // 项目配置
          let projectConfigs = reactive({});
          // 项目路径计算属性
          let projectPaths = computed(() => Object.keys(projectConfigs));
          // 项目配置
          let configs = reactive({});
          // 项目配置名
          let configNames = [
            '接口注释配置',
            '自定义注释配置',
            '枚举注释配置',
            '类注释配置',
            '方法注释配置',
            '属性注释配置',
            '全局注释配置',
            '文件注释配置',
            '翻译配置',
            '系统配置'
          ];
          let fixItems = ['文件注释配置', '翻译配置', '系统配置'];
          // 配置项图标
          let configIcons = [
            'mdi-memory',
            'mdi-meteor',
            'mdi-cup',
            'mdi-glasses',
            'mdi-chili-hot',
            'mdi-earth',
            'mdi-file',
            'mdi-airplane-takeoff',
            'mdi-translate',
            'mdi-cog-outline'
          ];
          // 当前选中的项目
          let selectedProject = ref('');
          // 接收来自插件的数据
          window.addEventListener('message', (event) => {
            const { command, data } = event.data;
            // 添加项目
            if (command === 'addProjectConfig') {
              data.forEach(({ projectPath, projectConfig }) => {
                projectConfigs[item.projectPath] = item.projectConfig;
              });
            }
            // 移除项目
            if (command === 'removeProjectConfig') {
              data.forEach((projectPath) => {
                if (projectPath in projectConfigs) {
                  delete projectConfigs[projectPath];
                }
              });
              /*    selectedProject.value = ''; */
            }
            if (command === 'initProjectConfig') {
              // 初始化项目配置
              Object.assign(projectConfigs, data); // 使用 Object.assign 来更新响应式对象
            }
          });

          // 提交配置
          const submitConfig = () => {
            vscode.postMessage({
              command: 'submitConfig',
              message: JSON.stringify(projectConfigs)
            });
          };
          // 选中项目
          const onSelectedProject = (value) => {
            Object.assign(configs, projectConfigs[value]);
          };

          // 返回值会暴露给模板
          return {
            tab,
            projectPaths,
            configs,
            submitConfig,
            selectedProject,
            onSelectedProject,
            configNames,
            configIcons,
            fixItems
          };
        }
      });

      // 使用 Vuetify 插件
      app.use(vuetify);

      // 挂载 Vue 应用
      app.mount('#app');
    </script>
  </body>
</html>
